<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-20 13:57:03
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-17 09:05:06
-->

<div class="warehousing">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>出库管理</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="ui-g">
                    <span class="ui-g-1">
                        <p-button *ngIf="'Pages.OutboundManagement.SupportingDelivery' | permission" label="配套出库" (onClick)="matingExWhs()"></p-button>
                    </span>
                    <span class="ui-g-1">
                        <p-button *ngIf="'Pages.OutboundManagement.AddIssue' | permission" label="新增出库" (onClick)="addEx()"></p-button>
                    </span>
                    <span class="ui-g-1">
                        <p-button *ngIf="'Pages.OutboundManagement.ScrapIssue' | permission" label="报废出库" (onClick)="scrapEx()"></p-button>
                    </span>
                    <span class="ui-g-1">
                        <p-button *ngIf="'Pages.OutboundManagement.RepairDelivery' | permission" label="返修出库" (onClick)="repairEx()"></p-button>
                    </span>
                    <span class="ui-g-1">
                        <p-button *ngIf="'Pages.OutboundManagement.RejectDelivery' | permission" label="驳回出库" (onClick)="rejectEx()"></p-button>
                    </span>
                    <span class="ui-g-1">
                        <p-button *ngIf="'Pages.OutboundManagement.ConsumablesOut' | permission" label="耗材出库" (onClick)="openUrl()"></p-button>
                    </span>
                </div>
                <div class="search" style="margin-top: 10px; display: flex;">
                    <span>
                        <span class="input-lable">出库单号：</span>
                        <input style=" width:120px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                            type="text" [(ngModel)]="productDrawingNo" />
                    </span>
                    <span>
                        <span class="input-lable">仓库名称：</span>
                        <p-dropdown filter="true" name="sstroeName" [options]="stroeNameOptions" placeholder="请选择仓库名称"
                            [(ngModel)]="sstroeName" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="sstroeName != 'undefind' "
                                    style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                <span *ngIf="sstroeName == 'undefind' "
                                    style="vertical-align:middle; margin-left: .5em;width: 117px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span>
                        <span class="input-lable" style="margin-left: 10px;">装配任务号：</span>
                        <input style=" width:120px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                            type="text" [(ngModel)]="assemblyTaskNumber" />
                    </span>
                    <span>
                        <span class="input-lable">合格证号：</span>
                        <input style=" width:120px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                            type="text" [(ngModel)]="qualifiedNumber" />
                    </span>
                    <span>
                        <span class="input-lable">放行单号：</span>
                        <input style=" width:120px;height: 35px;margin-right: 10px;" name="productDrawingNos"
                            type="text" [(ngModel)]="releaseOrder" />
                    </span>
                    <span>
                        <span class="input-lable">型号：</span>
                        <p-dropdown filter="true" name="model" [options]="modelOptions" placeholder="请选择"
                            [(ngModel)]="model" emptyFilterMessage="暂无数据" (onChange)="onChange($event)">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="model != 'undefind' "
                                    style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                <span *ngIf="model == 'undefind' "
                                    style="vertical-align:middle; margin-left: .5em;width: 117px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span>
                        <span class="input-lable" style="margin-left: 10px;">发次：</span>
                        <p-dropdown filter="true" name="sendTime" [options]="sendTimeOptions" placeholder="请选择"
                            [(ngModel)]="sendTime" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="sendTime != 'undefind' "
                                    style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                <span *ngIf="sendTime == 'undefind' "
                                    style="vertical-align:middle; margin-left: .5em;width: 117px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <div>
                        <p-button label="查询" (onClick)="getTableList()" class="ml"></p-button>
                        <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
                    </div>
                </div>

                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 150px">操作</th>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">出库单号</th>
                                    <th style="width: 150px">仓库名称</th>
                                    <th style="width: 120px">装配任务号</th>
                                    <th style="width: 150px">型号</th>
                                    <th style="width: 120px">发次</th>
                                    <th style="width: 150px;">合格证号</th>
                                    <th style="width: 150px;">放行单号</th>
                                    <th style="width: 120px">出库类型</th>
                                    <th style="width: 150px">备注</th>
                                    <th style="width: 150px">出库人</th>
                                    <th style="width: 150px">出库时间</th>
                                    <th style="width: 150px">确认人</th>
                                    <th style="width: 150px">确认时间</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 150px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <!-- <li>
                                                    <a href="javascript:;" (click)="llVisibleEv(record.id)">履历</a>
                                                </li> -->
                                                <li>
                                                    <a *ngIf="'Pages.OutboundManagement.See' | permission" href="javascript:;" (click)="lookResume(record,1)">查看</a>
                                                    <!-- retrievalStateDesc 配套 新增 报废 返修 驳回 -->
                                                </li>
                                                <li *ngIf="record.identifyingPeople == null">
                                                    <a *ngIf="'Pages.OutboundManagement.Modify' | permission" href="javascript:;" (click)="lookResume(record,2)">修改</a>
                                                </li>
                                                <li *ngIf="record.identifyingPeople == null">
                                                    <a *ngIf="'Pages.OutboundManagement.Confirm' | permission" href="javascript:;" (click)="sureResume(record)">确认</a>
                                                </li>
                                                <li *ngIf="record.retrievalStateDesc == '新增' || record.retrievalStateDesc == '配套'" [hidden]="record.identifyingPeople == null">
                                                    <a *ngIf="'Pages.OutboundManagement.Return' | permission" href="javascript:;" (click)="lookResume(record,3)">退库</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.deliveryNo}}</td>
                                    <td style="width: 150px">{{record.stroeName}}</td>
                                    <td style="width: 120px">{{record.assemblyTaskNumber}}</td>
                                    <td style="width: 150px">{{record.productCode}}</td>
                                    <td style="width: 120px">{{record.sendTime}}</td>
                                    <td style="width: 150px">{{record.qualifiedNumber }}</td>
                                    <td style="width: 150px">{{record.releaseOrder }}</td>
                                    <td style="width: 120px">{{record.retrievalStateDesc}}</td>
                                    <td style="width: 150px">{{record.remark}}</td>
                                    <td style="width: 150px">{{record.outPeople}}</td>
                                    <td style="width: 150px">{{record.storePutTime | date:'yyyy-MM-dd'}}</td>
                                    <td style="width: 150px">{{record.identifyingPeople}}</td>
                                    <td style="width: 150px">{{record.identifyingTime | date:'yyyy-MM-dd'}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                (onPageChange)="getTableList($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 履历弹窗 -->
    <p-dialog [style]="{width: '80%', height: '50%',minHeight:'300px',background:'#fff'}" header="操作履历"
        [(visible)]="llVisible" modal="modal" [responsive]="true">
        <p-table [value]="logList" [paginator]="false">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 150px">序号</th>
                    <th style="width: 150px">操作时间</th>
                    <th style="width: 150px">操作类型</th>
                    <th style="width: 150px">操作人</th>
                    <th style="width: 150px">操作详情</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                <tr>
                    <td style="width: 80px">{{rowIndex+1}}</td>
                    <td style="width: 150px">{{car.creationTime | date:'yyyy-MM-dd'}}</td>
                    <td style="width: 150px">{{car.operationTypeDesc}}</td>
                    <td style="width: 150px">{{car.userName}}</td>
                    <td style="width: 150px">{{car.businessTypeDesc}}</td>
                </tr>
            </ng-template>
        </p-table>


    </p-dialog>
    <!-- 查看  配套出库-->
    <p-dialog [style]="{width: '80%', height:'800px',background:'#fff'}" header="配套出库" [(visible)]="shortageVisible"
        (onHide)="displayclose()" modal="modal" [responsive]="true">
        <div class="ui-g" style="margin-top: 10px;">
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable" style="margin-right: 14px;">型号：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="model" type="text"
                    [(ngModel)]="lookforMatchingOutputList.model" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">发次：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="lotNo" type="text"
                    [(ngModel)]="lookforMatchingOutputList.lotNo" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">芯级：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="coreGrade" type="text"
                    [(ngModel)]="lookforMatchingOutputList.coreGrade" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">部套：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="partSleeve" type="text"
                    [(ngModel)]="lookforMatchingOutputList.partSleeve" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">规程图号：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="techniqueNumber" type="text"
                    [(ngModel)]="lookforMatchingOutputList.techniqueNumber" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">规程名称：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="techniqueName" type="text"
                    [(ngModel)]="lookforMatchingOutputList.techniqueName" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">工序号：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="processesName" type="text"
                    [(ngModel)]="lookforMatchingOutputList.processesName" />
            </span>
            <span class="ui-md-3 ui-lg-3 ui-sm-3 ui-xl-2">
                <span class="input-lable">工步：</span>
                <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="workStepName" type="text"
                    [(ngModel)]="lookforMatchingOutputList.workStepName" />
            </span>
        </div>
        <p-treeTable [value]="lookforMatchingOutputList.boundOutputs" [scrollable]="true" scrollHeight="500px"
            [(selection)]="treeTableSelect" [scrollable]="true">
            <ng-template pTemplate="header" let-rowData="rowData">
                <tr>
                    <th style="width: 80px">
                        <!-- <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox> -->
                        层级
                    </th>
                    <th style="width: 250px">操作</th>
                    <th style="width: 80px">选择</th>
                    <th style="width: 150px">物料图号{{checktype}}</th>
                    <th style="width: 150px">物料名称</th>
                    <th style="width: 150px">规格</th>
                    <th style="width: 150px">物料类型</th>
                    <th style="width: 150px">单位</th>
                    <th style="width: 150px">工艺用料</th>
                    <th style="width: 150px">配套数量</th>
                    <th style="width: 150px">缺料数量</th>
                    <th style="width: 150px">待出库</th>
                    <th style="width: 150px">本次出库</th>
                    <th style="width: 150px">已出库数</th>
                    <th style="width: 150px">配套状态</th>

                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                <tr [ttRow]="rowNode">
                    <td style="width: 80px">
                        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                    </td>
                    <td style="width: 250px" *ngIf="rowData.nodeLevel ==10">
                        <span><button [hidden]="rowData.nodeLevel == 9 || checktype ==1" type="button" class="form-btn"
                            (click)="lookDetail(rowData,'选择出库',2) ">选择出库</button>
                        <button [hidden]="rowData.nodeLevel == 9" type="button"
                            class="form-btn" (click)="lookDetail(rowData,'查看',2)">查看</button></span>
                    </td>
                    <td style="width: 250px" *ngIf="rowData.nodeLevel !=10"></td>
                    <td style="width: 80px">
                        <p-treeTableCheckbox [disabled]="checktype==1" [value]="rowNode">
                        </p-treeTableCheckbox>
                    </td>
                    <td style="width: 150px">{{rowData.productDrawingNo}}</td>
                    <td style="width: 150px">{{rowData.productName}}</td>
                    <td style="width: 150px">{{rowData.moudel}}</td>
                    <td style="width: 150px">{{rowData.materialTypeName}}</td>
                    <td style="width: 150px">{{rowData.unit}}</td>
                    <td style="width: 150px">{{rowData.processDosage}}</td>
                    <td style="width: 150px">{{rowData.suiteStock}}</td>
                    <td style="width: 150px">{{rowData.shortageNum}}</td>
                    <td style="width: 150px">{{rowData.outboundQuantity}}</td>
                    <td style="width: 150px">{{rowData.currentDelivery }}</td>
                    <td style="width: 150px">{{rowData.outboundedNum}}</td>
                    <td style="width: 150px">{{rowData.assortState}}</td>
                </tr>
            </ng-template>
        </p-treeTable>


    </p-dialog>
    <!--  配套出库弹窗中列表查看-->
    <p-dialog [style]="{width: '80%', minHeight:'300px',background:'#fff'}" header="出库查看"
        [(visible)]="showDetailVisible" (onHide)="displayclose()" modal="modal" [responsive]="true">

        <p-table [value]="showDetailList" [scrollable]="true" [(selection)]="showDetailListSelect">
            <ng-template pTemplate="header" let-rowData="rowData">
                <tr>

                    <th style="width: 80px">
                        <p-tableCheckbox [disabled]="lookDetailType =='查看'"></p-tableCheckbox>
                    </th>
                    <th style="width: 80px">序号</th>
                    <th style="width: 150px">仓库名称</th>
                    <th style="width: 150px">产品图号</th>
                    <th style="width: 150px">规格型号</th>
                    <th style="width: 150px">物料类型</th>
                    <th style="width: 150px">物料细类</th>
                    <th style="width: 150px">物料属性</th>
                    <th style="width: 150px">合格证号</th>
                    <th style="width: 150px">放行单号</th>
                    <th style="width: 150px">质控卡号</th>
                    <th style="width: 150px">型号(代号)</th>
                    <th style="width: 150px">发次</th>
                    <th style="width: 150px">批次</th>
                    <th style="width: 150px">合格证任务号</th>
                    <th style="width: 150px">装配任务号</th>
                    <th style="width: 150px">数量</th>
                    <th style="width: 150px">产品编号(件号)</th>
                    <th style="width: 150px">有效期止</th>
                    <th style="width: 150px">入库人</th>
                    <th style="width: 150px">入库时间</th>
                    <th style="width: 150px">备注</th>
                    <th style="width: 150px">确认人</th>
                    <th style="width: 150px">确认时间</th>

                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>

                <tr>

                    <td style="width: 80px">
                        <p-tableCheckbox [disabled]="lookDetailType =='查看'" [value]="car">
                        </p-tableCheckbox>
                    </td>
                    <td style="width: 80px">{{rowIndex+1}}</td>

                    <td style="width: 150px">{{car.stroeName}}</td>
                    <td style="width: 150px">{{car.productDrawingNo}}</td>
                    <td style="width: 150px">{{car.module}}</td>
                    <td style="width: 150px">{{car.materialTypeName}}</td>
                    <td style="width: 150px">{{car.materialCategoryName}}</td>
                    <td style="width: 150px">{{car.outboundStatesDesc}}</td>
                    <td style="width: 150px">{{car.qualifiedNumber}}</td>
                    <td style="width: 150px">{{car.releaseOrder}}</td>
                    <td style="width: 150px">{{car.qcCardNo}}</td>
                    <td style="width: 150px">{{car.productCode}}</td>
                    <td style="width: 150px">{{car.sendTime}}</td>
                    <td style="width: 150px">{{car.batch}}</td>
                    <td style="width: 150px">{{car.qualifiedTaskNumber}}</td>
                    <td style="width: 150px">{{car.assemblyTaskNumber}}</td>
                    <td style="width: 150px">{{car.quantity}}</td>
                    <td style="width: 150px">{{car.productNumber}}</td>
                    <td style="width: 150px">{{car.expirationDate |date:"yyyy-MM-dd"}}</td>
                    <td style="width: 150px">{{car.storePutPeopleDesc}}</td>
                    <td style="width: 150px">{{car.storePutTime |date:"yyyy-MM-dd"}}</td>
                    <td style="width: 150px">{{car.remark}}</td>
                    <td style="width: 150px">{{car.identifyingPeople}}</td>
                    <td style="width: 150px">{{car.identifyingTime |date:"yyyy-MM-dd"}}</td>

                </tr>
            </ng-template>
        </p-table>
        <div *ngIf="lookDetailType=='选择出库'" (click)="lookDetail(this.detailInfo, '选择出库', 3) "></div>


    </p-dialog>
    <!-- 配套出库 -->
    <app-mating-ex-warehouse #MatingExWarehouseComponent [warehouseInfo]="warehouseData" (modalSave)="getTableList()">
    </app-mating-ex-warehouse>
    <!-- 新增出库 -->
    <app-add-ex [checktype]="checktype" #AddExComponent [warehouseInfo]="warehouseData" (modalSave)="getTableList()">
    </app-add-ex>
    <!-- 报废出库 -->
    <app-scrap-ex [checktype]="checktype" #ScrapExComponent [warehouseInfo]="warehouseData"
        (modalSave)="getTableList()"></app-scrap-ex>
    <!-- 返修出库 -->
    <app-repair-ex [checktype]="checktype" #RepairExComponent [warehouseInfo]="warehouseData"
        (modalSave)="getTableList()"></app-repair-ex>
    <!-- 驳回出库 -->
    <app-reject-ex [checktype]="checktype" #RejectExComponent [warehouseInfo]="warehouseData"
        (modalSave)="getTableList()"></app-reject-ex>
    <!-- 配套退库 -->
    <app-return-warehouse [checktype]="checktype" #ReturnWarehouseComponent [warehouseInfo]="warehouseData"
        (modalSave)="getTableList()"></app-return-warehouse>
</div>